<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=.5, maximum-scale=.5, minimum-scale=.5, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>亿的出行</title>
    <script>
        !function (N, M) {
            function L() {
                var a = I.getBoundingClientRect().width;
                a / F > 540 && (a = 540 * F);
                var d = a / 10;
                I.style.fontSize = d + "px", D.rem = N.rem = d
            }

            var K, J = N.document, I = J.documentElement, H = J.querySelector('meta[name="viewport"]'), G = J.querySelector('meta[name="flexible"]'), F = 0, E = 0, D = M.flexible || (M.flexible = {});
            if (H) {
                console.warn("将根据已有的meta标签来设置缩放比例");
                var C = H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
                C && (E = parseFloat(C[1]), F = parseInt(1 / E))
            } else {
                if (G) {
                    var B = G.getAttribute("content");
                    if (B) {
                        var A = B.match(/initial\-dpr=([\d\.]+)/), z = B.match(/maximum\-dpr=([\d\.]+)/);
                        A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 / F).toFixed(2)))
                    }
                }
            }
            if (!F && !E) {
                var y = N.navigator.userAgent, x = (!!y.match(/android/gi), !!y.match(/iphone/gi)), w = x && !!y.match(/OS 9_3/), v = N.devicePixelRatio;
                F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F
            }
            if (I.setAttribute("data-dpr", F), !H) {
                if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" + E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) {
                    I.firstElementChild.appendChild(H)
                } else {
                    var u = J.createElement("div");
                    u.appendChild(H), J.write(u.innerHTML)
                }
            }
            N.addEventListener("resize", function () {
                clearTimeout(K), K = setTimeout(L, 300)
            }, !1), N.addEventListener("pageshow", function (b) {
                b.persisted && (clearTimeout(K), K = setTimeout(L, 300))
            }, !1), "complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded", function () {
                J.body.style.fontSize = 12 * F + "px"
            }, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L, D.rem2px = function (d) {
                var c = parseFloat(d) * this.rem;
                return "string" == typeof d && d.match(/rem$/) && (c += "px"), c
            }, D.px2rem = function (d) {
                var c = parseFloat(d) / this.rem;
                return "string" == typeof d && d.match(/px$/) && (c += "rem"), c
            }
        }(window, window.lib || (window.lib = {}));
    </script>
    <link rel="stylesheet" href="static/css/normalize.css">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

  	<link rel="stylesheet" href="static/assets/mui/css/mui.min.css"><!--mui组件-->
    <link rel="stylesheet" type="text/css" href="static/assets/mui/css/app.css" />
    <!--<link href="assets/mui/css/mui.picker.css" rel="stylesheet" />&lt;!&ndash;选择器组件&ndash;&gt;-->
    <!--<link href="assets/mui/css/mui.poppicker.css" rel="stylesheet" />-->
    <!--<link href="assets/mui/css/mui.dtpicker.css" rel="stylesheet" />-->
    <!-- 引入样式和js文件 -->
    <link rel="stylesheet" href="static/css/place_order.css">
    <link rel="stylesheet" href="static/css/route.css">
</head>
<body>
<div id="wapper">
	<div class="route_form" style="display:none;">
            <div class="route_list" rel="{$vo.id}">
                <div class="route-info">
                    <span class="start">蒲城东</span><em class="exchange"></em><span class="end">武夷山西</span>
                    <span class="price"><em class="symbol">￥</em><i>50</i></span>
                </div>
            </div>
    </div>
    <div class="placeorder_form">
        <form action="">
            <div class="option-list route">
                <!--<div class="route-info">请选择路线</div>-->
                <div class="route-info">
                	<p id="pathchoose">请选择路线</p>
                	<div id="pathinfo" style="display:none">
                		<input type="hidden" id="pathid" value="" />
	                    <span class="start"></span><em class="exchange"></em><span class="end"></span>
	                    <span class="price" style="" id="pricesum"><em class="symbol">￥</em><span>50</span></span>
                    </div>
                </div>
            </div>
            <div class="option-list user-phone">
                <label for="">联系手机</label><input type="number" placeholder="请输入手机号码" class="select-item" id="cellphone" value="{$userinfo.cellphone}" class="phone">
            </div>
            <div class="option-list user-date">
                <label for="orderdate">动车时间</label>
                <input type="text" id="date" class="select-item" value="请选择">
                <!--<div id='date' class="select-item date"><span class="result"  id="date-result">选择日期时间</span> &gt;</div>-->
            </div>
            <div class="option-list vehicles-num">
                <label for="">用车人数</label>
                <div id='vehicles-num' class="select-item date">
                    <span class="result" id="vehicles-num-result">请选择</span>
                </div>
            </div>
            <div class="option-list submit-box">
                <a class="submit" href="javascript:void(0)">提交订单</a>
            </div>
            <div class="option-list introduce">
                <ul>
                    <li>
                        <a href="#">
                            <img src="static/images/rectangle1.png" alt="">承诺30分钟内发车
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="static/images/rectangle2.png" alt="">商务SUV专车尊享
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="static/images/rectangle3.png" alt="">专业司机持证上岗
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="static/images/rectangle4.png" alt="">平台正规营运许可
                        </a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="static/assets/jquery/jquery-1.9.1.js"></script>
<link href="static/assets/mobiscroll/css/mobiscroll.custom-3.0.0-beta6.min.css" rel="stylesheet" type="text/css" />
<script src="static/assets/mobiscroll/js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript"></script>.
<script src="static/assets/mobiscroll/dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
<script src="static/assets/mobiscroll/dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
<!-- 引入样式和js文件 -->
<link rel="stylesheet" type="text/css" href="static/assets/mobileSelect/mobileSelect.css">
<script src="static/assets/mobileSelect/mobileSelect.js" type="text/javascript"></script>
<script type="text/javascript" src="static/js/place_order.js"></script>
<script type="text/javascript" src="static/assets/mui/js/mui.min.js"></script>
<script>
$(function(){
	$('#pathchoose,#pathinfo').click(function(){
		$('.route_form').show();
		$('#wapper').css('background','#f9fbfc');
		$('.placeorder_form').hide();
		//$(this).hide();
		//$('#pathinfo').show();
	});
	
	$('.route_form  div.route_list').on('click',function(e){
		var start = $(this).find('span').eq(0).text();
		var end = $(this).find('span').eq(1).text();
		var price = $(this).find('i').text();
		$(this).addClass('route_list_active').siblings().removeClass('route_list_active');
		$('.route_form').hide();
		$('.placeorder_form').show();
		$('#wapper').css('background','');
		$('#pathinfo span:eq(0)').text(start);
		$('#pathinfo span:eq(1)').text(end);
		//$('#pathinfo i').text(price);
		$('#pathchoose').hide();
		$('#pathinfo').show();
		$('#pathid').val($(this).attr('rel'));
	});
	
	$('.submit').click(function(){
//        mui.alert('恭喜您已经预约成功，稍后客服人员将与您联系','预约成功','我知道了');//测试弹窗
		if($('#pathinfo span:eq(0)').text()==''||
			$('#pathinfo span:eq(1)').text()=='' ||
			$('#pathinfo i').text()==''){
			mui.alert('请选择路线');
			return;
		}
		if($('#cellphone').val()==''){
			mui.alert('请填写手机号');
			return;
		}
		if(!(/^1[34578]\d{9}$/.test($('#cellphone').val()))){
			mui.alert("手机号码有误，请重填");
	        return false;
	    }
		if($('#date').val()=='' || $('#date').val()=='请选择'){
			mui.alert('请选择动车时间');
			return;
		}
		if($('#vehicles-num-result').text()=='请选择'){
			mui.alert('请选择人数');
			return;
		}
		$.ajax({
			type : 'post',
			url : '/index.php/index/index/add',
			data : {
				path_id : $('#pathid').val(),
				cellphone : $('#cellphone').val(),
				order_time : $('#date').attr('relval'),
				openid : '{$openid}',
				passenger_num : $('#vehicles-num-result').text()
			},
			dataType : 'json',
			success:function(data) {
				mui.alert('恭喜您已经预约成功，稍后客服人员将与您联系','预约成功','我知道了');
				sentmsg();
			}
		});
		
	});
});

function sentmsg(){
	$.ajax({
		type : 'post',
		url : '/index.php/index/index/sengmsg',
		data : {
			path : $('.start').text() + '→' + $('.end').text(),
			cellphone : $('#cellphone').val(),
			order_time : $('#date').attr('relval'),
			passenger_num : $('#vehicles-num-result').text()
		},
		dataType : 'json',
		success:function(data) {
			//alert(JSON.stringify(data));
		}
	});
}

function isWeiXin(){ 
	var ua = window.navigator.userAgent.toLowerCase(); 
	if(ua.match(/MicroMessenger/i) == 'micromessenger'){ 
		return true; 
	}else{ 
		return false; 
	} 
} 
</script>
</body>
</html>